/*
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-10-21 11:12:49
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-11-02 10:36:11
 * @FilePath: \宏烨找房\用户端\app\demo\src\page\Login\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react'
import { Form, Button, Input, Notify } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { httpLogin } from '../../api/login'
import { useDispatch } from 'react-redux';
import { fetchLoginAction } from '../../store/loginAction';
import { Ellipsis } from '@react-vant/icons';
import './index.css'
const Login = () => {
    const [form] = Form.useForm()
    const dispatch = useDispatch()

    const navigate = useNavigate()
    const onFinish = async (values) => {
        const res = await httpLogin('/login', values);
        console.log(res)
        if (res.data.code === 200) {
            Notify.show({ type: 'primary', message: res.data.msg })
            console.log(res)
            try {
                dispatch(fetchLoginAction(res.data.token, res.data.user ))
                navigate('/home')
            } catch {
                
            }
        }else{
            Notify.show({ type: 'primary', message: res.data.msg })

        }
    }
    return (
        <div className='login'>
            <div className="top">
                <span>宏烨经纪人</span>
                <span><Ellipsis /></span>
            </div>
            <img src={require('../../img/login.png')} alt="" style={{width:'200px',height:'250px',margin:'0 auto'}}/>
            <div className='login-title'>用心服务，创造未来</div>
            <div className="login-box">
                <Form
                    form={form}
                    onFinish={onFinish}
                    style={{ padding: '30px',}}
                    footer={
                        <div style={{ margin: '16px  0', borderRadius: '8px' }}>
                            <Button nativeType='submit' type='primary' block style={{ borderRadius: '8px' }}>
                                立即登录
                            </Button>
                        </div>
                    }
                >
                    <Form.Item
                        tooltip={{
                            message:
                                'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
                        }}
                        // intro='确保这是唯一的用户名'
                        rules={[{ required: true, message: '请填写用户名' }]}
                        name='username'
                        // label='用户名'
                        style={{ border: '1px solid #ccc', borderRadius: '8px' }}
                    >
                        <Input placeholder='请输入用户名'  />
                    </Form.Item>
                    <Form.Item
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='password'
                        style={{ border: '1px solid #ccc',marginTop:'10px' ,borderRadius:'8px'}}
                        // label='密码'
                    >
                        <Input placeholder='请输入密码' />
                    </Form.Item>
                </Form>

            </div>
            
            
        </div>
    )
}
export default Login;